<template>
    <!-- 朋友圈场景 -->
    <div v-if="props.sceneValue == 'friend'">
        <span v-if="friendSelectNum || friendLocalNum">
            <span v-if="friendSelectNum">
                已选择
                <span class="num">{{ friendSelectNum }}</span>
                {{ props.materialList[0]?.type == 1 ? '张' : '个' }}{{ getNameStr(props.materialList[0]?.type) }}，
            </span>
            <span v-if="localListLink.length">
                <span>已本地创建</span>
                <span v-for="item in localListLink" :key="item">
                    <span class="num">{{ getNum(item) }}</span>
                    <span>{{ item.type == 1 ? '张' : '个' }}</span>
                    <span>{{ getNameStr(item.type) }}，</span>
                </span>
            </span>
            <span v-if="localListNoLink.length">
                <span>已本地上传</span>
                <span v-for="item in localListNoLink" :key="item">
                    <span class="num">{{ getNum(item) }}</span>
                    <span>{{ item.type == 1 ? '张' : '个' }}</span>
                    <span>{{ getNameStr(item.type) }}，</span>
                </span>
            </span>
            您还可选
            <span class="num">{{ props.remainNum }}</span>
            {{ props.materialList[0]?.type == 1 ? '张' : '个' }}{{ getNameStr(props.materialList[0]?.type) }}
        </span>
        <span v-else> 未选择任何素材，最多支持9个图片，或者1个视频，或者1个链接 </span>
    </div>
    <!-- 其他 -->
    <div v-else>
        <span v-if="isNoLocal || isLocal">
            <span v-if="isNoLocal">
                <span>已选择</span>
                <span v-for="(item, index) in materialList" :key="index">
                    <span class="num">{{ item?.selectList?.length }}</span>
                    <span>{{ item.type == 1 ? '张' : '个' }}</span>
                    <span>{{ item.name }}，</span>
                </span>
            </span>
            <span v-if="isLocal">
                <span v-if="localListLink.length">
                    <span>已本地创建</span>
                    <span v-for="item in localListLink" :key="item">
                        <span class="num">{{ getNum(item) }}</span>
                        <span>{{ item.type == 1 ? '张' : '个' }}</span>
                        <span>{{ getNameStr(item.type) }}，</span>
                    </span>
                </span>
                <span v-if="localListNoLink.length">
                    <span>已本地上传</span>
                    <span v-for="item in localListNoLink" :key="item">
                        <span class="num">{{ getNum(item) }}</span>
                        <span>{{ item.type == 1 ? '张' : '个' }}</span>
                        <span>{{ getNameStr(item.type) }}，</span>
                    </span>
                </span>
            </span>
        </span>
        <span v-else> 未选择任何素材， </span>
        <span>您还可选</span>
        <span class="num">{{ props.remainNum }}</span>
        <span>个素材</span>
    </div>
</template>
<script setup lang="ts">
import { ref, computed, withDefaults } from 'vue';
import { getHashTabs } from '../utils/material';

interface Props {
    /** 选中的素材 */
    materialList: Array<any>;
    /** 本体上传素材 */
    localList: Array<any>;
    /** 上传最大数 */
    maxNum: number;
    /** 剩余可选择数量 */
    remainNum: number;
    /** 场景值 */
    sceneValue?: string;
}

const props = withDefaults(defineProps<Props>(), {
    materialList: () => [],
    localList: () => [],
    maxNum: 0,
    remainNum: 0,
    sceneValue: ''
});

const hashTabs = ref<any>(getHashTabs());

/**
 * 是否选中非本地素材
 */
const isNoLocal = computed(() => props.materialList.some(item => item.selectList.length));
/**
 * 是否上传本地素材
 */
const isLocal = computed(() => !!props.localList.length);
/**
 *
 */
const localListNoLink = computed(() => {
    return props.localList.filter(el => el.type != 3);
});

const localListLink = computed(() => {
    const list = props.localList.filter(el => el.type == 3);
    return list;
});

const friendSelectNum = computed(() => {
    return props.materialList[0]?.selectList?.length;
});

const friendLocalNum = computed(() => {
    return props.localList?.length;
});

const getNum = val => {
    const list = props.localList.filter(el => el.type == val.type) || [];
    return list.length;
};

const getNameStr = type => {
    const name = hashTabs.value[type]?.name;
    return name;
};
</script>
<style lang="scss" scoped>
span {
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    line-height: 1.4;
    color: #33302d;
}

.num {
    color: #ff6b00;
    margin: 0 5px;
}
</style>
